

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>

<meta name="format-detection" content="telephone=no" />
<meta content="width=device-width, initial-scale=1" name="viewport" />

<!--[if lt IE 9]>
    <script src="./js/html5.js" type="text/javascript"></script>
<![endif]-->

<title>YUKHIN 01 - HTML</title>

<!-- FOR THEME -->
<link href="./css/inuit.css" rel="stylesheet" type='text/css' />
<link href="./css/prettyphoto.css" rel="stylesheet" type='text/css' />
<link href="./css/style.css" rel="stylesheet" type='text/css' />

<!-- FOR INDIVIDUAL PAGE -->

<link href="./images/theme/icon.png" rel="shortcut icon" />
<link href="./images/theme/icon.png" rel="apple-touch-icon-precomposed" />


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

<body>
	<div class="wrapper">

        <!-- BEGIN HEADER -->
        <header id="header">
        
            <div class="grids">
            	<div class="grid-3 first-space"></div>
	            
	            <!-- BEGIN LOGO -->
	            <div id="logo" class="grid-3">
	            	<a href="#"><img src="./images/theme/logo-big.png" width="228" height="49" alt="" /></a>
	            </div>
	            <!-- END LOGO -->
	            
	            <!-- BEGIN MAIN MENU -->
	            <nav id="main-menu" class="grid-6">
	            	<div class="wrap">
		            	<div class="root"><a href="javascript:;">MENU</a></div>
		                <ul class="menu sf-menu">
		                	<li class="has-child "><a href="./home-1.html">HOME</a>
		                		<ul>
		                			<li><a href="./home-1.html">LAYOUT 1</a></li>
		                			<li><a href="./home-2.html">LAYOUT 2</a></li>
		                			<li><a href="./home-3.html">LAYOUT 3</a></li>
		                		</ul>
		                	</li>
		                	<li class="has-child "><a href="./headings.html">FEATURES</a>
		                		<ul>
		                			<li><a href="./headings.html">HEADINGS</a></li>
		                			<li><a href="./elements.html">PAGE ELEMENTS</a></li>
		                			<li><a href="./pricing-tables.html">PRICING TABLES</a></li>
		                			<li><a href="./about.html">ABOUT</a></li>
		                			<li><a href="./our-team.html">MEET OUR TEAM</a></li>
		                			<li><a href="./404.html">404</a></li>
		                			<li class="has-child"><a href="#">MULTI LEVEL MENU</a>
		                				<ul>
		                					<li><a href="#">LEVEL 3 ITEM 1</a></li>
		                					<li><a href="#">LEVEL 3 ITEM 2</a></li>
		                					<li><a href="#">LEVEL 3 ITEM 3</a></li>
		                				</ul>
		                			</li>
		                		</ul>
		                	</li>
		                	<li class="has-child "><a href="./portfolio-1-col.html">PORTFOLIO</a>
		                		<ul>
		                			<li><a href="./portfolio-1-col.html">ONE COLUMN</a></li>
		                			<li><a href="./portfolio-1-col-alt.html">ONE COLUMN ALT</a></li>
		                			<li><a href="./portfolio-2-cols.html">TWO COLUMNS</a></li>
		                			<li><a href="./portfolio-3-cols.html">THREE COLUMNS</a></li>
		                		</ul>
		                	</li>
		                	<li class="has-child active"><a href="./blog.html">BLOG</a>
		                		<ul>
		                			<li><a href="./blog.html">POST LIST</a></li>
		                			<li><a href="./blog-detail.html">POST DETAIL</a></li>
		                		</ul>
		                	</li>
		                	<li class=" "><a href="./contact.html">CONTACT</a></li>
		                </ul>
		        	</div> <!-- end wrap -->
	            </nav>
	            <!-- END MAIN MENU -->
	            
            </div>

        </header>
        <!-- END HEADER -->	<div id="content">
		
		<!-- BEGIN MAIN SECTIONS -->
		
		<!-- BEGIN SECTION -->
		<div class="page-section blog grids">
			<aside class="grid-3">
				<div class="wrap cf">
					<h1 class="section-title big"><span>Blog</span></h1>
					<section id="search">
						<form method="post" action="" class="form-1 cf" />
							<input type="text" class="search-field" name="" value="" />
							<button class="search-btn">search</button>
						</form>
					</section>
					<section id="category">
						<h1 class="section-title small"><a href="#">CATEGORIES</a></h1>
						<ul class="list clear">
							<li><a href="#">Design (1)</a></li>
							<li><a href="#">Education (1)</a></li>
							<li><a href="#">Featured (9)</a></li>
							<li><a href="#">Format Previews (11)</a></li>
							<li><a href="#">Mixed (1)</a></li>
							<li><a href="#">Uncategorized (1)</a></li>
						</ul>
					</section>
					<section id="recent-post">
						<h1 class="section-title small"><a href="#">RECENT POSTS</a></h1>
						<ul class="recent-post-1 clear">
							<li>
								<a class="thumb" href="#"><img alt="" src="./images/demo/thumb-70x70-3.jpg" width="70" height="70" /></a>
								<h1><a class="title" href="#">Drop Caps: Historical Use And Current Best Practices With CSS</a></h1>
							</li>
							<li>
								<a class="thumb" href="#"><img alt="" src="./images/demo/thumb-70x70-4.jpg" width="70" height="70" /></a>
								<h1><a class="title" href="#">Drop Caps: Historical Use And Current Best Practices With CSS</a></h1>
							</li>
							<li>
								<a class="thumb" href="#"><img alt="" src="./images/demo/thumb-70x70-1.jpg" width="70" height="70" /></a>
								<h1><a class="title" href="#">Drop Caps: Historical Use And Current Best Practices With CSS</a></h1>
							</li>
							<li class="mb0">
								<a class="thumb" href="#"><img alt="" src="./images/demo/thumb-70x70-2.jpg" width="70" height="70" /></a>
								<h1><a class="title" href="#">Drop Caps: Historical Use And Current Best Practices With CSS</a></h1>
							</li>
						</ul>
					</section>
					<section id="popular-tag">
						<h1 class="section-title small"><a href="#">POPULAR TAGS</a></h1>
						<ul class="tag-cloud clear">
							<li class="percent-100">
								<div class="num"><a href="#">295</a></div>
								<div class="tag"><a href="#">WORDPRESS</a></div>
							</li>
							<li class="percent-50">
								<div class="num"><a href="#">147</a></div>
								<div class="tag"><a href="#">JAVASCRIPT</a></div>
							</li>
							<li class="percent-80">
								<div class="num"><a href="#">240</a></div>
								<div class="tag"><a href="#">PHOTOSHOP</a></div>
							</li>
							<li class="percent-40">
								<div class="num"><a href="#">119</a></div>
								<div class="tag"><a href="#">HTML5</a></div>
							</li>
							<li class="percent-20">
								<div class="num"><a href="#">43</a></div>
								<div class="tag"><a href="#">CSS3</a></div>
							</li>
						</ul>
					</section>
					<section id="archive" class="mb0">
						<h1 class="section-title small"><a href="#">ARCHIVES</a></h1>
						<ul class="list clear">
							<li><a href="#">March 2012 (1)</a></li>
							<li><a href="#">August 2011 (1)</a></li>
							<li><a href="#">July 2011 (3)</a></li>
							<li><a href="#">May 2011 (1)</a></li>
							<li><a href="#">March 2011 (1)</a></li>
							<li><a href="#">February 2011 (2)</a></li>
							<li><a href="#">January 2011 (1)</a></li>
							<li><a href="#">December 2010 (1)</a></li>
							<li><a href="#">August 2010 (2)</a></li>
						</ul>
					</section>
				</div>
			</aside>
			<div class="grid-9">
				<div class="blog-list-1">
					<article>
						<a class="thumb" href="#"><img alt="" src="./images/demo/thumb-300x300-2.jpg" width="300" height="300" /></a>
						<header>
							<div class="category"><a href="#">Category Name</a> / <a href="#">Other category</a></div>
							<h1 class="title"><a href="#">Quick Status Update On The Coming BMX Event</a></h1>
							<div class="meta">By <a href="#">Administrator</a> on <time pubdate="" datetime="2012-12-12">12-12-2012</time> with 23 comments</div>
						</header>
						
						<div class="intro">
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
							<p class="mb0">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <span class="more-text"><a href="#">// continue</a></span></p>
							
						</div>
					</article>
					<article>
						<a class="thumb" href="#"><img alt="" src="./images/demo/thumb-300x300-3.jpg" width="300" height="300" /></a>
						<header>
							<div class="category"><a href="#">Category Name</a> / <a href="#">Other category</a></div>
							<h1 class="title"><a href="#">Quick Status Update On The Coming BMX Event</a></h1>
							<div class="meta">By <a href="#">Administrator</a> on <time pubdate="" datetime="2012-12-12">12-12-2012</time> with 23 comments</div>
						</header>
						
						<div class="intro">
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
							<p class="mb0">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <span class="more-text"><a href="#">// continue</a></span></p>
							
						</div>
					</article>
					<article>
						<a class="thumb" href="#"><img alt="" src="./images/demo/thumb-300x300-1.jpg" width="300" height="300" /></a>
						<header>
							<div class="category"><a href="#">Category Name</a> / <a href="#">Other category</a></div>
							<h1 class="title"><a href="#">Quick Status Update On The Coming BMX Event</a></h1>
							<div class="meta">By <a href="#">Administrator</a> on <time pubdate="" datetime="2012-12-12">12-12-2012</time> with 23 comments</div>
						</header>
						
						<div class="intro">
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
							<p class="mb0">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <span class="more-text"><a href="#">// continue</a></span></p>
							
						</div>
					</article>
					<article>
						<a class="thumb" href="#"><img alt="" src="./images/demo/thumb-300x300-4.jpg" width="300" height="300" /></a>
						<header>
							<div class="category"><a href="#">Category Name</a> / <a href="#">Other category</a></div>
							<h1 class="title"><a href="#">Quick Status Update On The Coming BMX Event</a></h1>
							<div class="meta">By <a href="#">Administrator</a> on <time pubdate="" datetime="2012-12-12">12-12-2012</time> with 23 comments</div>
						</header>
						
						<div class="intro">
							<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
							<p class="mb0">Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. <span class="more-text"><a href="#">// continue</a></span></p>
							
						</div>
					</article>
				</div>
				<ul class="page-nav">
					<li><a href="#">1</a></li>
					<li><a href="#">2</a></li>
					<li class="active"><a href="#">3</a></li>
					<li><a href="#">4</a></li>
					<li class="dots">...</li>
					<li><a href="#">10</a></li>
					<li class="ctrl-btn"><a href="#">next →</a></li>
				</ul>
			</div>
		</div>
		<!-- END SECTION -->
		
		<!-- END MAIN SECTIONS -->
    </div>

<!-- BEGIN PRE FOOTER -->
	<div id="pre-footer" class="cf">
		<div id="footer-tweets">
			<ul></ul>
		</div>
		<div id="tweets-tmp" style="display:none;visibility:hidden;"></div>
	</div>
<!-- END PRE FOOTER -->

<!-- BEGIN FOOTER -->
        <footer id="footer" class="cf">
        	<div class="grids">
	        	<div class="grid-3 col-1">
	        		<div class="cell-wrapper cf">
	        			<img alt="" id="footer-logo" src="./images/theme/logo-small.png" width="172" height="39" />
	        			<div class="company-info">
	        				Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
	        			</div>
	        			<div class="footer-section">
	        				<h1>STAY IN TOUCH</h1>
	        				<ul class="social-links">
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-1.png" width="29" height="29" /></a></li>
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-2.png" width="29" height="29" /></a></li>
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-3.png" width="29" height="29" /></a></li>
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-4.png" width="29" height="29" /></a></li>
	        					<li><a href="#"><img alt="" src="./images/theme/icon-social-5.png" width="29" height="29" /></a></li>
	        				</ul>
	        			</div>
	        		</div>
	        	</div>
	    		<div class="grid-3 col-2">
	    			<div class="cell-wrapper cf">
	    				<div class="footer-section">
	    					<h1>GALLERY</h1>
	    					<ul class="gallery" id="flickr-gallery"></ul>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="grid-3 col-3">
	    			<div class="cell-wrapper cf">
	    				<div class="footer-section">
	    					<h1>CONTACT</h1>
	    					<ul class="contact">
	    						<li class="cf">
	    							<span style="width: 50%;margin-right: 5%;float: left;">
	    								<span style="color: #fff;"><strong>Head office</strong></span><br />
	    								59, Tran Hung Dao street<br />
	    								ward 8, district 5<br />
	    								Ho Chi Minh city<br />
	    								HONG KONG
	    							</span>
	    							<span style="width: 45%;float: left;">
	    								<span style="color: #fff;">+82 907 341 688</span><br />
	    								<a href="#">contact@company.com</a><br /><br />
	    								<span style="color: #fff;">Applications</span><br />
	    								<a href="#">jobs@company.com</a><br />
	    							</span>
	    						</li>
	    						<li class="mb0 cf">
	    							<span style="width: 50%;margin-right: 5%;float: left;">
	    								<span style="color: #fff;"><strong>Oversea office</strong></span><br />
	    								226, Nguyen Trai street<br />
	    								ward 3, district 1<br />
	    								Can Tho city<br />
	    								THAILAND
	    							</span>
	    							<span style="width: 45%;float: left;">
	    								<span style="color: #fff;"><strong>+36 987 361 681</strong></span><br />
	    								<a href="#">contact2@company.com</a><br />
	    							</span>
	    						</li>
	    					</ul>
	    				</div>
	    			</div>
	    		</div>
	    		<div class="grid-3 col-4">
	    			<div class="cell-wrapper cf">
	    				<div class="footer-section">
	    					<h1>OUR CLIENT WORDS</h1>
	    					<ul class="testimonial">
	    						<li class="cf">
	    							<img alt="" src="./images/demo/thumb-36x36.jpg" width="36" height="36" />
	    							<span class="testimonial-content">
	    								Lorem ipsum dolor sit amet, consectetur adipisicing tempor incididunt ut
	    								<span class="client-name">- Le Mong Thuy</span>
	    							</span>
	    						</li>
	    						<li class="cf">
	    							<img alt="" src="./images/demo/thumb-36x36.jpg" width="36" height="36" />
	    							<span class="testimonial-content">
	    								Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	    								<span class="client-name">- Tina</span>
	    							</span>
	    						</li>
	    						<li class="cf mb0">
	    							<img alt="" src="./images/demo/thumb-36x36.jpg" width="36" height="36" />
	    							<span class="testimonial-content">
	    								Lorem ipsum dolor sit amet, consectetur adipisicing elit tempor ut
	    								<span class="client-name">- Huong Tinh Vu</span>
	    							</span>
	    						</li>
	    					</ul>
	    				</div>
	    			</div>
	    		</div>
	    	</div>
		</footer>
        <!-- END FOOTER -->
        
	</div>
	<!-- SCRIPTS -->
	<script type='text/javascript' src='./js/jquery.js'></script>
	<script type='text/javascript' src='./js/respond.min.js'></script>
	<script type='text/javascript' src='./js/mobilemenu.js'></script>
	<script type='text/javascript' src='./js/prettyPhoto.js'></script>
	<script type="text/javascript" src="./js/theme.js"></script>
	<!-- PAGE'S SCRIPTS -->
	
<div style="display:none"><script src='http://v7.cnzz.com/stat.php?id=155540&web_id=155540' language='JavaScript' charset='gb2312'></script></div>
</body>
</html>
